<template>
  <div>
    <el-dialog title="增加活动" :visible.sync="showAddActivityDialog" center width="40%">
      <el-form :model="activityData" :rules="rules" ref="activityData">

        <el-steps :active="active" finish-status="success">
          <el-step title="步骤 1"></el-step>
          <el-step title="步骤 2"></el-step>
          <el-step title="步骤 3"></el-step>
        </el-steps>

        <div v-show="active==1">

          <el-form-item label="活动创建者" :label-width="formLabelWidth">
            <el-select v-model="activityData.customer_id" filterable placeholder="请选择">
              <el-option
                v-for="item in customerList"
                :key="item.customer_id"
                :label="item.nickname"
                :value="item.customer_id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="活动名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="activityData.name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="店铺" :label-width="formLabelWidth">
            <el-select v-model="activityData.store_id" filterable placeholder="请选择">
              <el-option
                v-for="(item,index) in storeList"
                :key="index"
                :label="item.name"
                :value="item.customer_store_id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="活动开始时间" :label-width="formLabelWidth">
            <el-date-picker v-model="activityData.start_date" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="活动结束时间" :label-width="formLabelWidth">
            <el-date-picker v-model="activityData.end_date" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="名额总数" :label-width="formLabelWidth">
            <el-input v-model="activityData.allowed_total" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="虚报名额" :label-width="formLabelWidth">
            <el-input v-model="activityData.virtual_total" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="是否开启剩余20%自动增加金额" :label-width="formLabelWidth">
            <el-radio v-model="activityData.enable_auto_add_allowed_total" :label="1">是</el-radio>
            <el-radio v-model="activityData.enable_auto_add_allowed_total" :label="0">否</el-radio>
          </el-form-item>

        </div>

        <div v-show="active==2">
          <el-form-item label="每人允许购买数量" :label-width="formLabelWidth">
            <el-input v-model="activityData.allowed_purchase_quantity" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="购买课程数量" :label-width="formLabelWidth">
            <el-input v-model="activityData.purchase_course" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="赠送课程数量" :label-width="formLabelWidth">
            <el-input v-model="activityData.give_course" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="是否开启每人限购科目数量" :label-width="formLabelWidth">
            <el-radio v-model="activityData.enablea_allowed_purchase_quantity" :label="1">是</el-radio>
            <el-radio v-model="activityData.enablea_allowed_purchase_quantity" :label="0">否</el-radio>
          </el-form-item>

          <el-form-item label="是否开启买卖课程赠送课程" :label-width="formLabelWidth">
            <el-radio v-model="activityData.enable_purchase_course_then_give_course" :label="1">是</el-radio>
            <el-radio v-model="activityData.enable_purchase_course_then_give_course" :label="0">否</el-radio>
          </el-form-item>

          <el-form-item label="活动状态" :label-width="formLabelWidth">
            <el-radio-group v-model="activityData.active_status">
              <el-radio :label="1">进行中</el-radio>
              <el-radio :label="0">未开始</el-radio>
              <el-radio :label="2">已结束</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="操作状态" :label-width="formLabelWidth">
            <el-radio v-model="activityData.operate_status" :label="1">发布</el-radio>
            <el-radio v-model="activityData.operate_status" :label="0">暂存</el-radio>
          </el-form-item>
          <el-form-item label="系统状态" :label-width="formLabelWidth">
            <el-radio v-model="activityData.status" :label="1">启用</el-radio>
            <el-radio v-model="activityData.status" :label="0">停用</el-radio>
          </el-form-item>
        </div>

        <div v-show="active == 3">
          <el-form-item label="发布时间" :label-width="formLabelWidth">
            <el-date-picker v-model="activityData.date_published" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="详情" :label-width="formLabelWidth">
            <el-input v-model="activityData.detail" autocomplete="off"></el-input>
          </el-form-item>

<!--          <el-form-item :label="'活动图片'" :label-width="formLabelWidth">-->
<!--            <div class="upload_head_img">-->
<!--              <el-upload :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="upload_picture" class="avatar-uploader" action="">-->
<!--                <img v-if="activityData.image" :src="activityData.image" class="avatar">-->
<!--                <i v-else class="el-icon-plus avatar-uploader-icon"/>-->
<!--              </el-upload>-->
<!--            </div>-->
<!--          </el-form-item>-->

          <el-form-item :label="'活动图片'" :label-width="formLabelWidth">
            <el-upload
              class="upload-demo"
              :before-upload="beforeAvatarUpload"
              :http-request="upload_picture"
              :file-list="fileList"
              list-type="picture"
              action="">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>

<!--          <el-form-item label="活动图片" :label-width="formLabelWidth">-->
<!--            <el-input v-model="activityData.image" autocomplete="off"></el-input>-->
<!--          </el-form-item>-->

          <el-form-item label="参加人数" :label-width="formLabelWidth">
            <el-input v-model="activityData.join_pepole" autocomplete="off"></el-input>
          </el-form-item>

<!--          <el-form-item label="课程数组" :label-width="formLabelWidth">-->
<!--            <el-input v-model="activityData.course" autocomplete="off"></el-input>-->
<!--          </el-form-item>-->
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
        <el-button @click="cancelSubmit">取 消</el-button>
        <el-button type="primary" @click="submitActivity('activityData')">确 定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import store from '@/store'
  import {add} from '@/api/thk/activity'
  import { client } from '@/utils/alioss'

  import {dateFormat} from '@/utils/dateFormat'

  export default {
    name: 'addActivity',

    data() {
      return {
        showAddActivityDialog: false,
        formLabelWidth: '220px',
        active: 1,

        activityData: {
          customer_id: '',                                // 活动创建者id
          store_id: '',                                   // store_id
          name: '',                                       // 活动名称
          start_date: '',                                 // 活动开始时间
          end_date: '',                                   // 活动结束时间
          allowed_total: '',                              // 名额总数（限制购买人数)
          join_pepole: 0,                                 // 加入人数
          enable_auto_add_allowed_total: 1,              // 是否开启剩余20%自动增加金额
          virtual_total: '',                              // 虚报名额
          enablea_allowed_purchase_quantity: 1,          // 是否开启每人限购科目数量:0否, 1是
          allowed_purchase_quantity: '',                  // 每人允许购买数量
          enable_purchase_course_then_give_course: 1,    // 是否开启买课程赠送课程
          purchase_course: '',                            // 购买课程数量
          give_course: '',                                // 赠送课程数量
          detail: '',                                     // 活动详情
          active_status: 0,                               // 活动状态: 0未开始,1进行中,2已结束
          operate_status: 1,                              // 操作状态: 0暂存,1发布
          status: 1,                                      // 系统状态: 0停用,1启用
          date_published: '',                             // 发布时间
          date_added: '',                                 // 添加时间
          date_midified: '',                              // 最后更新时间
          image: '',                                      // 活动图片
          // course: '',                                     // 课程数组(可以选择多个课程),后期修改为数组
        },

        // 上传的图片会已这种方式存放在这里,取出url后拼接到image中 url1#url2#url3
        // {[name:'', ulr:''], {name:'', url:''}}
        fileList: [],

        customerList: [],
        storeList: [],

        rules: {
          // 活动名称为必填字段
          name:[
            { required: true, message: '活动名称为必填项', trigger: 'blur' },
          ],
        }
      }
    },




    methods: {
      // 判断是否点击了提交
      submitActivity(activityData){
        // 如果点击了确定，则调用api，发送请求

        this.$refs[activityData].validate((valid) => {
          if (valid) {
            this.activityData.start_date = dateFormat("YYYY-mm-dd", new Date(this.activityData.start_date))
            this.activityData.end_date = dateFormat("YYYY-mm-dd", new Date(this.activityData.end_date))
            // 数据库中只要年份
            this.activityData.date_published = dateFormat("YYYY-mm-dd", new Date(this.activityData.date_published)).split('-')[0]

            this.activityData.date_added = dateFormat("YYYY-mm-dd HH:MM:SS", new Date())
            this.activityData.date_midified = dateFormat("YYYY-mm-dd HH:MM:SS", new Date())

            let img = ''
            // 格式化image字符串(后端需要imgUrl1#imgUrl2#imgUrl3)
            // fileList的数据 [{name:'', ulr:''}, {name:'', url:''}]
            for (let i=0; i<this.fileList.length; i++){
              console.log(this.fileList[i].url)
              // 图片地址索引从1开始
              let index = i
              index += 1
              img = img + this.fileList[i].url + index +'$$#'
            }

            // 将最后一个$$#去除
            this.activityData.image = img.substr(0, img.length-3)



            console.log('========= activityAdd ============')
            console.log(this.activityData)
            add(store.getters.token,this.activityData).then(result => {
              // 增加成功
              this.$parent.getActivityList()
              this.showAddActivityDialog = !this.showAddActivityDialog
            }).catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },

      cancelSubmit(customerList, storeList){
        this.customerList = customerList
        this.storeList = storeList
        this.showAddActivityDialog = !this.showAddActivityDialog

      },

      next() {
        if (this.active++ > 2) this.active = 1;
      },

      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 1MB!')
        }
        return (isJPG | isPNG) && isLt2M
      },
      upload_picture(file){
        const that = this
        const fileName = 'user-admin_user-picture' + file.file.uid
        client().put(fileName, file.file).then((res) => {
          // this.$set(that.activityData, 'image', res.url)
          console.log(res.url);
          that.fileList.push({name:'',url: res.url})
          that.$message.success('头像地址上传成功！')
        }).catch((err) => {
          that.$message.error('头像地址上传失败，原因：' + err)
        })
      },
    }
  }
</script>

<style>
  /* 图片上传的样式 */
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    display: block;
  }

  /* 头像地址(head_img)图片上传组件的尺寸 */
  .upload_head_img .avatar-uploader .el-upload{
  }
  .upload_head_img .avatar-uploader-icon{
    font-size: 28px;
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
  .upload_head_img .avatar{
    width: 80px;
    height: 80px;
  }
</style>
